<template>
  <div id="EditPremises">
    <el-tabs v-model="activeName" @tab-click="handleClick">
      <el-tab-pane label="基本信息" name="first">
        <el-form ref="ruleForm" :model="editForm" label-width="80px" :rules="rules">
          <el-form-item label="楼盘名称" prop="name">
            <el-input v-model="editForm.name" placeholder="楼盘名称" />
          </el-form-item>
          <el-form-item label="楼盘地址" prop="address">
            <el-input v-model="editForm.address" type="address" placeholder="楼盘地址" />
          </el-form-item>
          <el-form-item label="城市地区">
            <el-select v-model="editForm.province" clearable placeholder="请选择省" @change="Selectcity(editForm.province)">
              <el-option
                v-for="item in options"
                :key="item.value"
                :label="item.regionName"
                :value="item.regionId"
              />
            </el-select>
            <el-select v-model="editForm.city" clearable placeholder="请选择市" @change="SelectCount(editForm.city)">
              <el-option
                v-for="item in citys"
                :key="item.value"
                :label="item.regionName"
                :value="item.regionId"
              />
            </el-select>
            <el-select v-model="editForm.county" clearable placeholder="请选择县/区" @change="selectrole(editForm.county)">
              <el-option
                v-for="item in counts"
                :key="item.value"
                :label="item.regionName"
                :value="item.regionId"
              />
            </el-select>
          </el-form-item>
          <el-form-item label="商圈">
            <el-checkbox-group v-model="selcirlie">
              <el-checkbox v-for="role in cirlie" :key="role.id" :label="role.id">{{ role.name }}</el-checkbox>
            </el-checkbox-group>
          </el-form-item>
          <el-form-item label="地铁">
            <el-checkbox-group v-model="selectsubway">
              <el-checkbox v-for="role in subsway" :key="role.id" :label="role.id">{{ role.subway }}</el-checkbox>
            </el-checkbox-group>
          </el-form-item>
          <el-form-item label="建筑面积">
            <el-input v-model="editForm.proportion" placeholder="建筑面积" />平方米
          </el-form-item>
          <el-form-item label="建筑类型">
            <el-checkbox-group v-model="buildings" @change="checkedbuilding">
n              <el-checkbox  label="0"  >伴楼</el-checkbox>
              <el-checkbox label="1"  >塔楼</el-checkbox>
              <el-checkbox label="2"  >板塔结合</el-checkbox>
              <el-checkbox label="3"  >底层</el-checkbox>
              <el-checkbox label="4"  >高层</el-checkbox>
              <el-checkbox label="5" >多层</el-checkbox>
            </el-checkbox-group>
          </el-form-item>
          <el-form-item label="社区类型">
            <el-select v-model="editForm.communityType" placeholder="请选择社区类型">
              <el-option label="请选择社区类型" value="" />
              <el-option label="未知类型" value="0" />
              <el-option label="大型社区" value="1" />
              <el-option label="中型社区" value="2" />
              <el-option label="小型社区" value="3" />
            </el-select>
          </el-form-item>
          <el-form-item label="物业类型">
            <el-select v-model="editForm.premisesType" placeholder="请选择物业类型">
              <el-option label="请选择物业类型" value="" />
              <el-option label="普通住宅" value="0" />
              <el-option label="公寓" value="1" />
              <el-option label="商住两用" value="2" />
              <el-option label="商业地产" value="3" />
              <el-option label="写字楼" value="4" />
            </el-select>
          </el-form-item>
          <el-form-item label="楼盘特色">
            <el-checkbox-group v-model="configProperty">
              <el-checkbox v-for="role in Property" :key="role.id" :label="role.id">{{ role.premisesProperty }}</el-checkbox>
            </el-checkbox-group>
          </el-form-item>
          <el-form-item label="容积率">
            <el-input v-model="editForm.grossPlotRatio" placeholder="容积率" />平方米
          </el-form-item>
          <el-form-item label="得房率">
            <el-input v-model="editForm.efficiency" placeholder="得房率" />%
          </el-form-item>
          <el-form-item label="绿化率">
            <el-input v-model="editForm.greenCoverage" placeholder="绿化率" />%
          </el-form-item>
          <el-form-item label="楼栋数">
            <el-input v-model="editForm.buildingCount" placeholder="楼栋数" />栋
          </el-form-item>
          <el-form-item label="开发商">
            <el-input v-model="editForm.developer" placeholder="开发商" />
          </el-form-item>
          <el-form-item label="物业管理公司">
            <el-input v-model="editForm.estate" placeholder="物业管理公司" />
          </el-form-item>
          <el-form-item label="楼盘简介">
            <el-input
              v-model="editForm.introduce"
              type="textarea"
              :rows="6"
              placeholder="请输入内容"
            />
          </el-form-item>

          <el-form-item
            v-for="(grade, index) in peripheralFacilities"
            :key="grade.key"
            :label="'周边配套' + (index+1) "
          >
            标题:<el-input v-model="grade.title" style="width: 120px" />
            内容:<el-input v-model="grade.content" style="width: 120px" />
            <el-button @click.prevent="removeGrade(grade)">删除</el-button>
          </el-form-item>
          <el-form-item>
            <el-button @click="addDomain">新增</el-button>
          </el-form-item>

          <el-form-item
            v-for="(grade, index) in trafficCondition"
            :key="grade.key"
            :label="'交通情况' + (index+1) "
          >
            标题:<el-input v-model="grade.title" style="width: 120px" />
            内容:<el-input v-model="grade.content" style="width: 120px" />
            <el-button @click.prevent="removeGrades(grade)">删除</el-button>
          </el-form-item>
          <el-form-item>
            <el-button @click="addDomains">新增</el-button>
          </el-form-item>

          <el-form-item>
            <el-button type="primary" @click="PremisesEdit('ruleForm')">保存</el-button>
          </el-form-item>
        </el-form>
      </el-tab-pane>
      <el-tab-pane label="相册管理" name="second">
        <el-form>
        <el-form-item label="户型图">
          <el-upload
            class="avatar-uploader"
            action="http://localhost:9999/house-resource/oss/upload"
            :show-file-list="false"
            :on-success="handleAvatarSuccess"
            :before-upload="beforeAvatarUpload">
            <img v-if="huxing" :src="huxing" class="avatar">
            <i v-else class="el-icon-plus avatar-uploader-icon"></i>
          </el-upload>
        </el-form-item>
        <el-form-item label="外景图">
          <el-upload
            class="avatar-uploader"
            action="http://localhost:9999/house-resource/oss/upload"
            :show-file-list="false"
            :on-success="handleAvatarSuccess"
            :before-upload="beforeAvatarUpload">
            <img v-if="waijing" :src="waijing" class="avatar">
            <i v-else class="el-icon-plus avatar-uploader-icon"></i>
          </el-upload>
        </el-form-item>
        <el-form-item label="施工图">
          <el-upload
            class="avatar-uploader"
            action="http://localhost:9999/house-resource/oss/upload"
            :show-file-list="false"
            :on-success="handleAvatarSuccess"
            :before-upload="beforeAvatarUpload">
            <img v-if="shigong" :src="shigong" class="avatar">
            <i v-else class="el-icon-plus avatar-uploader-icon"></i>
          </el-upload>
        </el-form-item>
        <el-form-item label="效果图">
          <el-upload
            class="avatar-uploader"
            action="http://localhost:9999/house-resource/oss/upload"
            :show-file-list="false"
            :on-success="handleAvatarSuccess"
            :before-upload="beforeAvatarUpload">
            <img v-if="xiaoguo" :src="xiaoguo" class="avatar">
            <i v-else class="el-icon-plus avatar-uploader-icon"></i>
          </el-upload>
        </el-form-item>
        <el-form-item label="首页图">
          <el-upload
            class="avatar-uploader"
            action="http://localhost:9999/house-resource/oss/upload"
            :show-file-list="false"
            :on-success="handleAvatarSuccess"
            :before-upload="beforeAvatarUpload">
            <img v-if="shouye" :src="shouye" class="avatar">
            <i v-else class="el-icon-plus avatar-uploader-icon"></i>
          </el-upload>
        </el-form-item>
        </el-form>
      </el-tab-pane>
    </el-tabs>
  </div>
</template>
<script>
export default {
  data() {
    return {
      buildings:[],
      subsway: [],
      selectsubway: [],
      configProperty: [],
      Property: [],
      selcirlie: [],
      cirlie: [],
      counts: [],
      options: [],
      citys: [],
      activeName: 'first',
      businesses: [],
      checkedroles: [],
      peripheralFacilities:[
        {
          title: '',
          content: '',
          type: 0
        }
      ],
      trafficCondition:[
        {
          title: '',
          content: '',
          type: 0
        }
      ],
      editForm: {},
      regions: [],
      regionsProps: {
        value: 'regionId',
        label: 'regionName',
        children: 'regions'
      },
      rules: {
        name: [
          { required: true, message: '请输入楼盘名称', trigger: 'blur' },
          { min: 2, max: 10, message: '长度在 2 到 10 个字符', trigger: 'blur' }
        ],
        address: [
          { required: true, message: '请输入楼盘地址', trigger: 'blur' },
          { min: 2, max: 20, message: '长度在 2 到 20 个字符', trigger: 'blur' }
        ]
      },
      checkedBusiness: [],
      shouye: '',
      xiaoguo: '',
      shigong: '',
      waijing: '',
      huxing: '',
    }
  },
  created() {
    this.getProperty()
    this.city()
    this.initData()
  },
  methods: {
    checkedbuilding(val){
      console.log(val)
      this.editForm.buildingTypes=val;
      this.buildings = val;
    },
    handleAvatarSuccess(res, file) {
      this.imageUrl = URL.createObjectURL(file.raw);
    },
    beforeAvatarUpload(file) {

      const isLt2M = file.size / 1024 / 1024 < 2;

      if (!isLt2M) {
        this.$message.error('上传头像图片大小不能超过 2MB!');
      }
      return  isLt2M;
    },
    initData() {
      // eslint-disable-next-line no-empty,eqeqeq
      if (this.$route.query.pressesid > 0) {
        this.editForm.id = this.$route.query.pressesid
        this.axios.get('http://localhost:9999/house-market/tbPremisesInfo/getbyid', {
          params: {
            id: this.editForm.id
          }
        }).then((res) => {

          console.log(res.data.obj)
          // this.Selectcity(res.data.obj.province)
          // this.SelectCount(res.data.obj.city)
          // this.selectrole(res.data.obj.county)
          //
          // // 地铁
          // this.selectsubway =res.data.obj.selectsubway
          // // 商圈
          // this.selcirlie =res.data.obj.selcirlie

          this.editForm = res.data.obj
          if(res.data.obj.province) {
            var city = res.data.obj.city;
            var county = res.data.obj.county
            this.Selectcity(this.editForm.province)
            this.editForm.city = city

            this.SelectCount(this.editForm.city)
            this.editForm.county = county
            this.selectrole(this.editForm.county)
            // 地铁
            this.selectsubway =res.data.obj.selectsubway
            // 商圈
            this.selcirlie =res.data.obj.selcirlie
          }


        })
      } else {
        this.editForm = {}
        this.selcirlie = []
      }
    },
    getProperty() {
      this.axios.get('http://localhost:9999/house-market/tbPremisesInfo/getPropertyList').then((response) => {
        this.Property = response.data.obj
      })
    },
    removeGrade(item) {
      let index = this.peripheralFacilities.indexOf(item)
      if (index !== -1) {
        this.peripheralFacilities.splice(index, 1)
      }
    },
    addDomain() {
      this.peripheralFacilities.push({
        title: '',
        content: '',
        key: Date.now()
      })
    },
    removeGrades(item) {
      let index = this.trafficCondition.indexOf(item)
      if (index !== -1) {
        this.trafficCondition.splice(index, 1)
      }
    },
    addDomains() {
      this.trafficCondition.push({
        title: '',
        content: '',
        key: Date.now()
      })
    },
    handleClick(tab, event) {
      console.log(tab, event)
    },
    city() {
      this.axios.get('http://localhost:9999/system-management/sysRegion/list', {
        params: {
          parentId: 1
        }
      }).then((response) => {
        this.options = response.data.obj
      })
    },
    Selectcity(val) {
      this.subsway = []
      // 查询地铁
      this.axios.get('http://localhost:9999/house-market/tbSubway/getSubswayByid', {
        params: {
          id: val
        }
      }).then((response) => {
        this.subsway = response.data.obj
      })
      this.citys = []
      this.editForm.city = ''
      this.counts = []
      this.editForm.county = ''
      // 查询城市
      this.axios.get('http://localhost:9999/system-management/sysRegion/list', {
        params: {
          parentId: val
        }
      }).then((response) => {
        this.citys = response.data.obj
      })
    },
    SelectCount(val) {
      this.counts = []
      this.editForm.county = ''
      this.axios.get('http://localhost:9999/system-management/sysRegion/list', {
        params: {
          parentId: val
        }
      }).then((response) => {
        this.counts = response.data.obj
      })
    },
    selectrole(val) {
      this.axios.get('http://localhost:9999/system-management/tbBusinessCircle/listByCountyId', {
        params: {
          code: val
        }
      }).then((response) => {
        this.cirlie = response.data.obj
      })
    },
    PremisesEdit(formName) {
      this.editForm.peripheralFacilities=this.peripheralFacilities
      this.editForm.trafficCondition=this.trafficCondition
      this.editForm.buildingTypes=this.buildings
      this.editForm.selcirlie=this.selcirlie
      this.editForm.selectsubway=this.selectsubway
      this.editForm.configProperty=this.configProperty
      this.$refs[formName].validate((valid) => {
        if (valid) {
          alert('submit!')
          this.axios.post('http://localhost:9999/house-market/tbPremisesInfo/save', this.editForm).then((res) => {
            // eslint-disable-next-line eqeqeq
            if (res.data.code == '200') {
              alert('操作成功')
              this.$router.replace({ 'path': 'Premises' })
            } else {
              alert('操作失败')
            }
          })
        } else {
          console.log('error submit!!')
          return false
        }
      })
    }
  }
}
</script>

<style>
.avatar-uploader .el-upload {
  border: 1px dashed #d9d9d9;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}
.avatar-uploader .el-upload:hover {
  border-color: #409EFF;
}
.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 178px;
  height: 178px;
  line-height: 178px;
  text-align: center;
}
.avatar {
  width: 178px;
  height: 178px;
  display: block;
}
</style>

